<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    <%
        String path = request.getContextPath();
        String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
                + path;
    %>
    <c:set var="bp" value="<%=basePath%>"></c:set>
    <link rel="stylesheet" type="text/css" href="${bp}/static/css/htmleaf-demo.css"/>
    <link rel="stylesheet" type="text/css" href="${bp}/static/css/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="${bp}/static/css/login.css"/>
    <script type="text/javascript" src="${bp}/static/js/jquery.js"></script>
    <script type="text/javascript" src="${bp}/static/js/login.js"></script>

    <%--实时校验注册信息--%>
    <script>
        // 电话校验
        function uTel_check() {
            //判断手机号是否已经注册
           let a= $('#utel').val()
            var phone= $.trim(a);
            console.log(phone);
            $.ajax({
                url: "getcustomerbyutel.action",
                type: "post",
                data:{
                    "utel":phone,
                },
                success:function (result){
                    console.log(result);
                    var re1 = JSON.parse(result);
                    console.log(re1);
                    if (re1==false){
                        //正则表达式，判断电话号码的格式正确性
                        var phone1 = /^[1][3,4,5,7,8][0-9]{9}$/;
                        if (phone == "") {
                            document.getElementById("uteltishi").innerHTML = "电话不能为空";
                            document.getElementById("uteltishi").style.color = "red";
                            return false;
                        } else {
                            document.getElementById("uteltishi").innerHTML = "请输入你的常用手机号，我们会严格保密";
                            document.getElementById("uteltishi").style.color = "#999999";
                            if (!phone1.test(phone)) {
                                document.getElementById("uteltishi").innerHTML = "手机号码格式不正确，请重新输入";
                                document.getElementById("uteltishi").style.color = "red";
                                document.getElementById("utel").value = " ";
                                return false;
                            } else {
                                document.getElementById("uteltishi").innerHTML = "手机号码格式正确";
                                document.getElementById("uteltishi").style.color = "#999999";
                                return true;
                            }
                        }
                        $("#uteltishi").html("电话号可以使用");
                    }else{
                        $("#uteltishi").html("电话号已经注册,请换新号注册");
                        document.getElementById("uteltishi").style.color = "red";
                        $('#utel').val("");
                    }
                }
            });
        }
        // 得到焦点，提示归零
        function uTel_check2() {
            $("#uteltishi").html("");
        }

        //查看确认密码
        function openrepass(){
            var repassshow=document.getElementById("upass");
            if (repassshow.type=="password"){
                repassshow.type="text";
            }else{
                repassshow.type="password";
            }
        }
    </script>
</head>

<body>
<div class="htmleaf-container">
    <div id="wrapper" class="login-page">
        <div id="login_form" class="form">
            <form class="login-form" action="regist" method="post">
                <h3 style="text-align: center;margin-top:0">用户注册</h3>
                <input type="text" placeholder="电话号码" id="utel" name="utel" required="required" onblur="uTel_check()" onfocus="uTel_check2()"/>
                <p id="uteltishi"></p>
                <div><input type="password" placeholder="密码" id="upass" name="upass" required="required"/>
                <span onclick="openrepass()" style="color: #5a5745; position: absolute;margin:16px 0 0 -40px;font-size: 10px; ">查看</span></div>
                <input style="background-color: #5cb85c" value="注	册"  type="submit">
                <p class="message">已经有了一个账户? <a id="toregist" href="tologin">立刻登录</a></p>
            </form>
        </div>
    </div>
</div>
</body>
</html>